<template>
  <div v-show="visible">
    <el-dialog
      title="订单派稿"
      :visible="visible"
      @close="closeDialog"
      width="50%"
      style="min-width: 400px"
    >
      <el-form ref="orderForm" :model="orderData" :rules="rules">
        <el-form-item label="订单编号" label-width="100px" required>
          <el-input
            v-model="order.orderSnId"
            placeholder="请输入顶订单编号"
            disabled
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="处理人" label-width="100px" prop="processed">
          <el-input
            suffix-icon="el-icon-arrow-right"
            v-model="orderData.processName"
            @focus="selectProcessor"
            :min="0"
            autocomplete="off"
            placeholder="请选择处理人"
          ></el-input>
        </el-form-item>

        <el-form-item label="返稿时间" label-width="100px" prop="returnTime">
          <el-date-picker
            v-model="orderData.returnTime"
            placeholder="请选择返稿时间"
            type="date"
            align="right"
            value-format="timestamp"
            :picker-options="pickerOptions"
            style="max-width: 100%"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="编辑金额" label-width="100px" prop="processMoney">
          <el-input
            v-model="orderData.processMoney"
            type="number"
            :min="0"
            placeholder="请输入金额"
            autocomplete="off"
          >
            <template slot="prefix">¥</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer center">
        <el-button
          type="primary"
          v-hasPermi="['order:order:assignOrder']"
          :loading="submitLoading"
          @click="submitForm"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <process
      :visibleDialog="visibleDialog"
      :alreadySelectProcessd="order.processd"
      @receiveProcess="receiveProcess"
      @close="closeProcess"
    ></process>
  </div>
</template>

<script>
import { assignOrder } from "@/api/order/order";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    order: {
      type: Object,
      default: {},
    },
    isSubmit: {
      type: Boolean,
      default: true,
    },
    Obj:{
      type:Object,
      default: ()=> {}
    }
  },

  components: {
    process: () => import("./selectProcess.vue"),
  },
  data() {
    return {
      visibleDialog: false,
      orderData: {
        processName: "",
        id: 0,
        returnTime: "",
        processed: 0,
        processMoney: null,
      },
      rules: {
        // orderSnId: [
        //   { required: true, message: "请输入订单编号", trigger: "blur" }
        // ],
        processed: [
          {
            required: true,
            message: "请选择处理人",
            trigger: ["blur", "change"],
          },
          // 自定义规则
          {
            validator: (rule, value, callback) => {
              if (value === 0) {
                callback(new Error("请选择处理人"));
              } else {
                callback();
              }
            },
            trigger: ["blur", "change"],
          },
        ],
        processMoney: [
          { required: true, message: "请输入处理金额", trigger: "blur" },
        ],
        returnTime: [
          { required: true, message: "请选择返稿时间", trigger: "blur" },
        ],
      },
      pickerOptions: {
        disabledDate(time) {
          // 获取今天的日期
          const today = new Date();
          // 设置可选范围：如果时间小于今天的时间，则禁用
          return (
            time.getTime() <
            new Date(
              today.getFullYear(),
              today.getMonth(),
              today.getDate()
            ).getTime()
          );
        },
      },
      submitLoading: false
    };
  },
  methods: {
    cancel() {
      this.closeDialog();
    },

    submitForm() {
      this.orderData.id = this.order.id;
      this.$refs["orderForm"].validate((valid) => {
        if (!valid) return;
        if (this.isSubmit) {
          this.submitLoading = true;
          assignOrder(this.orderData, this);
        } else {
          this.$emit("receiveData",this.orderData);
          this.$emit("close", false);
        }
      });
    },

    closeDialog() {
      this.$emit("close", false);
    },

    /**
     * 关闭编辑人员弹窗
     * @param {Boolean} visible
     */
    closeProcess(visible) {
      this.visibleDialog = visible;
    },

    /**
     * 接收数据
     * @param {Object} process
     */
    receiveProcess(process) {
      this.orderData.processed = process.userId;
      this.orderData.processName = process.nickName;
    },

    /**
     * 选择处理人
     */
    selectProcessor() {
      this.visibleDialog = true;
    },
  },

  watch:{
    Obj:{
      handler(newVal,oldVal){
        if(newVal && Object.keys(newVal).length){
          this.orderData = Object.assign({},this.orderData,newVal);
        }
      },
      immediate: true,
      deep:true
    }
  }
};
</script>

<style></style>
